<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue MQTT Example</title>
  <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<!--  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>-->
</head>
<body>
<div id="app">
  <div v-for="(message, index) in messages" :key="index">
    <p>网关号: {{ message.gwSN }}</p>
    <p>电压: {{ message.U }}</p>
    <p>电流: {{ message.I }}</p>
    <p>功率: {{ message.P }}</p>
    <p>时间: {{ message.time }}</p>
  </div>
</div>

<script>
  import Vue from 'vue'

  new Vue({
    el: '#app',
    data: {
      client: null,
      messages: [],
    },
    created: function() {
      this.client = window.mqtt.connect('mqtt://weld.cmhijs.cn:1883');
      this.client.on('connect', () => {
        this.client.subscribe('/gw/acrelHW/AWT100/data/#', (err) => {
          if (!err) {
            console.log('Subscribed to topic successfully');
          }
        });
      });

      this.client.on('message', (topic, message) => {
        let msg = JSON.parse(message.toString());
        this.messages.push(msg);
      });
    },
  });
</script>
</body>
</html>
